<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>手风琴效果</title>
</head>
<style type="text/css">
    ul,
    li,
    div,
    span {
        margin: 0;
        padding: 0;
    }

    li {
        list-style: none;
    }

    span {
        display: block;
        border-bottom: 1px solid black;
        background-color: orange;

    }

    .wrap {
        width: 400px;
        height: 500px;
        border: 1px solid black;
        margin: 0 auto;
    }

    .wrap li {
        width: 400px;
        height: 40px;
        overflow: hidden;

    }

    ul li.checked {
        height: 340px;
    }

    .wrap li span {
        height: 39px;
        line-height: 39px;
        text-indent: 20px;
    }

    .wrap li div {
        height: 300px;
        line-height: 300px;
        text-align: center;
        font-size: 50px;
    }
</style>

<body>
    <ul class="wrap">
        <li class="checked">
            <span>选项1</span>
            <div>1</div>
        </li>
        <li>
            <span>选项2</span>
            <div>2</div>
        </li>
        <li>
            <span>选项3</span>
            <div>3</div>
        </li>
        <li>
            <span>选项4</span>
            <div>4</div>
        </li>
        <li>
            <span>选项5</span>
            <div>5</div>
        </li>
    </ul>
</body>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("ul li span").mouseover(function () {
            $(this).parent().animate({
                height: 340
            }, 500);
            $(this).parent().siblings().animate({
                height: 40
            }, 500);
        })
    })
</script>

</html>